<template>
    <el-dialog :title=" '您正在开通'+title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="650px" top="50px"
        append-to-body>
        <div class="form-boxs">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
              
                <el-form-item label="价格:" prop="">
                   <span style="font-size: 16px;"> <span style="font-weight: 600;font-size: 18px;">{{ form.price }}</span>元/月</span> 
                </el-form-item>
                <el-form-item label="开通月份:" prop="serverMonth">
                     <el-input-number v-model="form.serverMonth" @change="getCountInfoByType" :min="1" :max="36" style="width: 200px;" :precision="0" :step="1" placeholder="请输入开通月份"></el-input-number>
                </el-form-item>
                <el-form-item label="开通金额:" >
                    <span style="font-weight: 600;color: #f40;font-size: 18px;"> {{ form.price * form.serverMonth }}</span>
                    元
                   
                </el-form-item>
                <el-form-item label="支付方式：" prop="num">
                    <payWayLsit :showYue="false" :payWay='payWay' ref="payWayLsit" @selectPayway="selectPayway">
                    </payWayLsit>
                </el-form-item>
                <div class="center">
                    <el-button type="primary" @click="submitForm('form')" v-loading="loading">确认</el-button>
                </div>
            </el-form>
            <payQrcode ref="payQrcode" @checkOrderInterval="checkOrderInterval" @checkOrder="checkOrder" @init="init"></payQrcode>
        </div>
    </el-dialog>
</template>
<script>
import moneyApi from "@/api/financeCenter/myMoney";
import payApi from "@/api/financeCenter/pay";
import payQrcode from "../../../tenantPages/moneys/components/PayQrcodeCommon.vue";
import payWayLsit from "../../components/payWayLsit.vue";
import _ from "lodash";

export default {
    name: "addjifen",
    components: { payQrcode, payWayLsit },

    data() {
        return {
            title: '基础服务包',
            orderType: 3,
            dialogVisible: false,
            loading: false,
            activeIndex: "",
            activeInfo: null,
            countJifen: "",
            payWay: 2,
            activeRemark: "",
            // 表单参数
            form: {
                price: "",
                serverMonth: "",
            },
            orderId: "",
            rules: {
                serverMonth: [{ required: true, message: "请输入开通月份", trigger: "blur" }],
            },
            jieliu: 0,
            tipsTitle:''
        };
    },
    created() { },
    methods: {
        init() { 
            this.$emit('success')
        },
        // 打开弹窗
        open(title, type,price) {
            this.title =title
            
            if(type== 'baseServer') {
                 this.orderType = 3
            }else {
                this.orderType = 4
            }
            this.form.serverMonth = 1
            this.loading = false;
            this.form.price = price
            this.dialogVisible = true;
        },
        selectPayway(val) {
            this.payWay = val;
        },
        // 根据金额计算应得虞豆
        getCountInfoByType(val) {

        },
        countComputed() {
            moneyApi.getCountInfoByType({ price: this.form.price }).then((res) => {
                this.countJifen = res.data.count;
                this.jieliu = 0;
            });
        },

        // 重置
        reset() {
            this.$refs.form.resetFields();
        },
        kuaijieClick(money, i) {
            this.activeIndex = i;
            this.form.price = money;
            this.$refs["form"].validate();
            // this.countComputed();
        },
        // 确认开通
        async submitForm(formName) {
               let price = this.form.price * this.form.serverMonth;
               console.log(price,'价格')
            this.$refs["" + formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let title = this.title
                  
                    this.$confirm(`确定开通${this.form.serverMonth}个月${title}功能吗？`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                              let price = this.form.price * this.form.serverMonth;
                            moneyApi
                                .addBzj({
                                    orderType: this.orderType,
                                    amount:price,
                                    serverMonth: this.form.serverMonth,
                                })
                                .then(async (res) => {
                                    this.orderId = res.data.id;
                                    await this.payNow(res.data.id);
                                   
                                    this.loading = false;
                                });
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    this.$alert("请输入充值金额！");
                }
            });
        },

        // 轮询订单支付结果
        checkOrderInterval() {
          
            moneyApi.payBzjStateInterval({ id: this.orderId }).then((res) => {
                if (res.code == 200) {
                    if (res.data.pay_status == 2) {
                        this.$store.dispatch("getShopInfo");
                        this.$refs.payQrcode.showSuccess(
                            this.title,
                            "开通成功！",
                            true
                        );
                        this.$refs.payQrcode.close();
                        this.dialogVisible = false;
                    }
                }
            });
        },
        // 查询订单状态
        checkOrder() {
            moneyApi
                .payBzjStateHander({
                    id: this.orderId,
                })
                .then((res) => {
                    if (res.code == 200) {
                        if (res.data.payStatus == 2) {
                            this.$store.dispatch("getShopInfo");
                            this.$refs.payQrcode.showSuccess(
                                this.title,
                                "充值成功！",
                                true
                            );
                            this.$refs.payQrcode.close();
                            this.dialogVisible = false;
                        } else {
                            this.$message.waring("未查询到支付结果！如有问题请联系客服");
                        }
                    }
                });
        },
        // 请求支付参数
        async payNow(id) {
            let obj = {
                id: id,
                payWay: this.payWay,
                payScene: 3,
                qrPayMode: 4,
                goodsTitle: this.title,
            };
            const res1 = await payApi.userPayOrderRecordPayment(obj);
            //console.log(res1);
            if (res1.code === 200) {
                const isHuifu = res1.data.isHuifu || 1
                this.$refs.payQrcode.open(this.payWay, res1.data.formStr, isHuifu)
            }
        },

        close() {
            this.reset();
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped lang="scss">
.form-boxs {
    padding: 10px 10px;
    .top-box {
        .flex {
            align-items: center;
        }
        flex-wrap: wrap;
        .item {
            flex-shrink: 0;
            width: 217px;
            height: 110px;
            margin-right: 20px;
            background-image: url("https://imgage.maimaihao.com/yuduhulian/erp/static/icon/jf-bg.png");
            background-size: 100% 100%;
            padding: 5px 30px 0 10px;
            margin-bottom: 10px;
            position: relative;

            &:nth-of-type(3n) {
                margin-right: 0;
            }

            .money {
                color: #fff;
            }

            .clock {
                width: 18px;
                height: 18px;
                background-image: url("https://imgage.maimaihao.com/yuduhulian/erp/static/icon/clock.png");
                background-size: 100% 100%;
                margin-right: 3px;
            }

            .xs {
                font-size: 16px;
                font-weight: 800;
                color: #333333;
                background: linear-gradient(180deg, #f2e36c 0%, #d1a80d 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                line-height: 16px;
            }

            .name {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 60px;
                height: 18px;
                background: #ffffff;
                border-radius: 4px 0px 9px 0px;
                border: 1px solid #cbcafb;
                text-align: center;
                color: #ff0000;
                font-size: 12px;
            }

            .item-bot {
                color: #000;
                margin-top: 20px;

                .jf {
                    font-size: 24px;
                    font-weight: 800;
                }
            }
        }
    }

    .des {
        margin-top: 10px;

        .tit {
            font-weight: bold;
        }
    }

    .sub-tit {
        font-size: 24px;
        margin-top: 10px;
    }

    .kuaijie {
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .kuaijie-item {
        min-width: 200px;
        // width: 100%;
        // height: 49px;
        border-radius: 4px;
        border: 1px solid $yellow;
        text-align: center;
        color: $yellow;
        padding: 10px;
        margin-right: 30px;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;

        &.active {
            color: #fff;
            background-color: #ff9717;
        }

        .xs {
            background-color: #eb8200;
            width: 33px;
            height: 17px;
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
            color: #fff;
        }
    }

    .demo-ruleForm {
        margin-top: 20px;
    }

    .zfb {
        width: 42px;
        height: 42px;
    }

    .tip {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
        margin-top: -15px;
    }

    .center {
        text-align: center;
        margin-top: 20px;

        .el-button {
            width: 293px;
            height: 48px;
            font-size: 18px;
        }
    }
}
::v-deep .el-dialog__body {
    padding-top: 0px !important;
}

</style>
